<template>
  <!-- 采购清单 -->
  <div>
    <div class="btn-group" v-if="$route.query.status !== '查看'">
      <el-button type="single-number" plain @click="hideDilog = true"
        >选合同物资</el-button
      >
      <el-dropdown type="single-number" plain>
        <el-button class="pl-btn" size="mini" plain>
          批量设置<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="batchSite"
            >批量设置地址</el-dropdown-item
          >
          <el-dropdown-item @click.native="batchManufacturers"
            >批量设置生产厂家</el-dropdown-item
          >
          <el-dropdown-item @click.native="resetNum"
            >批量清零本次验收数量</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>

      <el-button type="single-number" plain @click="handleCopy"
        >复制行</el-button
      >
      <el-button type="single-number" plain @click="handleDelete"
        >删除行</el-button
      >
    </div>
    <!-- 表格-带合计行 -->
    <div
      class="ccui-multifunctional-table-wrapper"
      style="margin:20px 0 70px 0"
    >
      <ux-grid
        max-height="560"
        show-overflow="title"
        ref="plxTable"
        keep-source
        :header-cell-class-name="must"
        :highlightCurrentRow="false"
        :widthResize="true"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :summary-method="getSummaries"
        show-summary
      >
        <ux-table-column title="序号" type="index" width="80" fixed="left" />
        <ux-table-column
          :show-overflow-tooltip="true"
          fixed="left"
          width="140"
          field="materialCode"
          title="设备物资编码"
        >
        </ux-table-column>
        <ux-table-column
          :show-overflow-tooltip="true"
          fixed="left"
          width="300"
          field="materialName"
          title="设备物资名称"
        >
        </ux-table-column>
        <ux-table-column
          width="130"
          :show-overflow-tooltip="true"
          field="materialState"
          title="设备物资说明"
        >
        </ux-table-column>
        <ux-table-column
          :show-overflow-tooltip="true"
          field="categoryName"
          title="分类名称"
          width="130"
        >
        </ux-table-column>
        <ux-table-column
          :show-overflow-tooltip="true"
          field="measureUnit"
          title="计量单位"
          width="90"
        >
        </ux-table-column>
        <ux-table-column
          :show-overflow-tooltip="true"
          field="acceptanceDate"
          title="验收日期"
          width="160"
          v-if="$route.query.status === '查看'"
        >
          <template v-slot="scope">
            <span>{{ formatDate(scope.row.acceptanceDate) }}</span>
          </template>
        </ux-table-column>
        <ux-table-column
          v-else
          :show-overflow-tooltip="true"
          width="160"
          field="acceptanceDate"
          title="验收日期"
          :edit-render="{ autofocus: '.el-input__inner' }"
        >
          <template v-slot:edit="scope">
            <el-date-picker
              :disabled="$route.query.status === '查看'"
              v-model="scope.row.acceptanceDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </template>
          <template v-slot="scope">
            <span class="my-input-sc span-input">{{
              formatDate(scope.row.acceptanceDate)
            }}</span>
          </template>
        </ux-table-column>
        <ux-table-column
          v-if="$route.query.status === '查看'"
          :show-overflow-tooltip="true"
          width="350"
          field="daohuo"
          title="验收地点"
        >
          <template v-slot="scope">
            <span>{{ scope.row.testdaohuo }}</span>
          </template>
        </ux-table-column>
        <!-- <ux-table-column
          v-else
          :show-overflow-tooltip="true"
          width="350"
          field="daohuo"
          title="验收地点"
          :edit-render="{ autofocus: '.el-input__inner' }"
        >
          <template v-slot:edit="scope">
            <el-input
              :disabled="$route.query.status === '查看'"
              readonly
              type="text"
              v-model="scope.row.testdaohuo"
              @focus="daohuoDialog(scope.row)"
            ></el-input>
          </template>
          <template v-slot="scope">
            <span class="my-input-sc span-input">{{
              scope.row.testdaohuo
            }}</span>
          </template>
        </ux-table-column> -->

        <ux-table-column
          :show-overflow-tooltip="true"
          width="160"
          field="contractNumber"
          :formatter="numFormatter"
          title="合同数量"
        >
        </ux-table-column>

        <ux-table-column
          v-if="
            $route.query.status === '查看' || $route.query.status === '编辑'
          "
          :show-overflow-tooltip="true"
          width="160"
          field="acceptanceCurrentEndNumber"
          :formatter="acceptanceCurrentFormatter"
          title="本次实际验收数量"
        >
        </ux-table-column>
        <ux-table-column
          :show-overflow-tooltip="true"
          field="acceptanceCurrentNumber"
          width="130"
          title="本次验收数量"
          v-if="$route.query.status === '查看'"
        >
          <template v-slot="scope">
            <span>{{ NumberZero(scope.row.acceptanceCurrentNumber) }}</span>
          </template>
        </ux-table-column>
        <ux-table-column
          v-else
          :show-overflow-tooltip="true"
          field="acceptanceCurrentNumber"
          width="130"
          title="本次验收数量"
          :edit-render="{ autofocus: '.el-input__inner' }"
        >
          <template v-slot:edit="scope">
            <el-input
              :disabled="$route.query.status === '查看'"
              type="text"
              @blur="
                bcysNumRules($event, scope.row.bowOutCurrentNumber, scope.row)
              "
              v-model="scope.row.acceptanceCurrentNumber"
            ></el-input>
          </template>
          <template v-slot="scope">
            <span class="my-input-sc span-input">{{
              NumberZero(scope.row.acceptanceCurrentNumber)
            }}</span>
          </template>
        </ux-table-column>
        <ux-table-column
          :show-overflow-tooltip="true"
          width="250"
          field="manufacturerBrand"
          title="生产厂家/品牌"
          v-if="$route.query.status === '查看'"
        >
          <template v-slot:default="scope">
            <span>{{ scope.row.manufacturerBrand }}</span>
          </template>
        </ux-table-column>
        <ux-table-column
          v-else
          :show-overflow-tooltip="true"
          width="250"
          field="manufacturerBrand"
          title="生产厂家/品牌"
        >
          <template v-slot:default="scope">
            <div style="disple:flex;">
              <el-input
                disabled
                style="width:80%"
                v-model="scope.row.manufacturerBrand"
                type="text"
              />
              <el-button
                :disabled="$route.query.status === '查看'"
                @click="checkBrand(scope.row)"
                type="primary"
                plain
                >选择</el-button
              >
            </div>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="remake"
          width="150"
          title="备注"
          v-if="$route.query.status === '查看'"
        >
          <template v-slot:default="scope">
            <span>{{ scope.row.remake }}</span>
          </template>
        </ux-table-column>
        <ux-table-column
          v-else
          :show-overflow-tooltip="true"
          field="remake"
          width="150"
          title="备注"
          :edit-render="{ autofocus: '.el-input__inner' }"
        >
          <template v-slot:edit="scope">
            <el-input v-model="scope.row.remake" type="text" maxlength="1000" />
          </template>
          <template v-slot="scope">
            <span class="my-input-sc span-input">{{ scope.row.remake }}</span>
          </template>
        </ux-table-column>
      </ux-grid>
    </div>
  </div>
</template>
<script>
import BigNumber from "bignumber.js";

// import { getSmpPcConcById } from "../api/index";
import { generateUUID, formatNumber } from "@/basa/utils";

export default {
  components: {},
  props: {
    title: {
      type: String,
      default: "标题"
    },
    listData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      hideDilog: false,
      tableData: [],
      rowSite: {}, // 当前点击的地址弹框回显
      checkedLine: [], // 被选中数据
      dialogFormVisible: false,
      acceptanceCurrentNumberTotal: 0, // 合计本次验收数量
      timer: "",
      typeList: 0, // 大类
      checkId: "", // 当前项id
      matLessList: [],
      allSet: "",
      allSetSite: ""
    };
  },
  watch: {
    listData: {
      handler(n) {
        n.forEach(item => {
          item.uuid = generateUUID();
        });
        this.tableData = n;
        this.$nextTick(() => {
          this.$refs.plxTable.reloadData(this.tableData);
        });
      },
      immediate: true
    },
    tableData: {
      handler(n) {
        n.forEach((item, index) => {
          item.sno = index;
        });
        this.$emit("getWuzi", n);
      },
      immediate: true
    }
  },
  activated() {
    this.tableData = [];
  },

  methods: {
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              // return prev + curr;
              return new BigNumber(prev).plus(curr);
            } else {
              return prev;
            }
          }, 0);

          if (
            column.property === "acceptanceCurrentNumber" ||
            column.property === "acceptanceCurrentEndNumber" ||
            column.property === "contractNumber"
          ) {
            sums[index] = formatNumber(sums[index], 3);
          } else {
            sums[index] = "";
          }
        } else {
          sums[index] = "";
        }
      });

      return [sums];
    },

    // 表格加*号
    must(obj) {
      if (
        obj.column.title === "验收日期" ||
        obj.column.title === "验收地点" ||
        obj.column.title === "本次验收数量" ||
        obj.column.title === "生产厂家/品牌"
      ) {
        return "must";
      }
    },

    // 表单验证定位
    positionFrom() {
      return new Promise((resolve, reject) => {
        if (this.tableData.length < 1) {
          reject({ tabLabel: "物资清单", isFocus: "wuziqingdan" });
          this.$showErrorMessage("请选择合同物资");
          return;
        }
        let testdaohuo = this.tableData.filter(item => {
          // 到货地点必填拦截
          return item.testdaohuo ? item : "";
        });
        if (testdaohuo.length !== this.tableData.length) {
          reject({ tabLabel: "物资清单", isFocus: "wuziqingdan" });
          this.$showErrorMessage("验收地点不能为空");
          return;
        }
        let acceptanceCurrentNumber = this.tableData.filter(item => {
          // 本次验收数量必填拦截
          return item.acceptanceCurrentNumber ? item : "";
        });
        if (acceptanceCurrentNumber.length !== this.tableData.length) {
          reject({ tabLabel: "物资清单", isFocus: "wuziqingdan" });
          this.$showErrorMessage("本次验收数量不能为空");
          return;
        }
        let acceptanceDate = this.tableData.filter(item => {
          // 验收日期必填拦截
          return item.acceptanceDate ? item : "";
        });
        if (acceptanceDate.length !== this.tableData.length) {
          reject({ tabLabel: "物资清单", isFocus: "wuziqingdan" });
          this.$showErrorMessage("验收日期不能为空");
          return;
        }
        let manufacturerBrand = this.tableData.filter(item => {
          // 生产厂家品牌必填拦截
          return item.manufacturerBrand ? item : "";
        });
        if (manufacturerBrand.length !== this.tableData.length) {
          reject({ tabLabel: "物资清单", isFocus: "wuziqingdan" });
          this.$showErrorMessage("生产厂家品牌不能为空");
          return;
        }
        resolve("成功");
      });
    },

    acceptanceCurrentFormatter({ row }) {
      if (row.acceptanceCurrentEndNumber) {
        const num = row.acceptanceCurrentEndNumber * 1;
        return formatNumber(num, 3);
      } else {
        return row.acceptanceCurrentEndNumber;
      }
    },
    concTotalnumFormatter({ row }) {
      if (row.concTotalAcceptanceNumber) {
        const num = row.concTotalAcceptanceNumber * 1;
        return formatNumber(num, 3);
      } else {
        return row.concTotalAcceptanceNumber;
      }
    },
    numFormatter({ row }) {
      if (row.contractNumber) {
        const num = row.contractNumber * 1;
        return formatNumber(num, 3);
      } else {
        return row.contractNumber > 0 ? row.contractNumber : "";
      }
    },
    formatDate(date) {
      date = new Date(date); //转换成Data();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    NumberZero(num) {
      return formatNumber(num, 3);
    }
  }
};
</script>
<style lang="scss" scoped>
.ccui-tab-wrapper {
  display: flex;
}
/deep/.el-button + .el-button {
  margin: 10;
}
.btn-group {
  width: 100%;
  text-align: right;
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.el-dropdown {
  margin: 0 10px;
}
/deep/.el-input-group__append .el-button {
  color: #0089ef;
  background: #e6f3fd;
  border-color: #99d0f9;
}

// /deep/ .el-table__fixed,
// /deep/.el-table__fixed-right {
//   pointer-events: none;
//   td {
//     pointer-events: auto;
//   }
// }

// /deep/.el-table {
//   .el-table__body-wrapper {
//     z-index: 2;
//   }
// }
/deep/.el-table__fixed-footer-wrapper tbody td {
  background: #fff;
}
/deep/ .pl-btn {
  padding: 0 20px;
  height: 30px;
  background: #f7f9ff;
  border: 1px solid #0089ef;
  font-weight: 600;
  border-radius: 4px;
  position: relative;
  span {
    font-size: 13px;
    font-weight: 500;
    color: #0089ef;
    display: block;
  }
}

/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}

/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
/deep/ .ccui-multifunctional-table-wrapper .el-table__header-wrapper th {
  border-right: 1px solid #edf2fc;
}
/deep/ .ccui-multifunctional-table-wrapper .el-table td {
  border-right: 1px solid #edf2fc;
}
</style>
